<script setup>
import {
    Edit,
    Delete
} from '@element-plus/icons-vue'

import { ref } from 'vue'




const queryTime = ref([])

const account = ref('')

const name = ref('')

const payState = ref([])

const payStates = ref([
  {
    "id": 1,
    "contentValue": "已支付",
  },
  {
    "id": 3,
    "contentValue": "已退款",
  }
])


const payType = ref([])

const payTypes = ref([
  {
    "id": 0,
    "contentValue": "微信支付",
  },
  {
    "id": 1,
    "contentValue": "小寻支付",
  }
])

//文章列表数据模型
const historyData = ref([

])

const channel = ref([])


const channels = ref([
  {
    "name": "小米",
    "value": "xm",
  },
  {
    "name": "qh360",
    "value": "qh360",
  },
  {
    "name": "掌育",
    "value": "zy",
  }
  ,
  {
    "name": "三基同创",
    "value": "sjtc",
  }
  ,
  {
    "name": "华为",
    "value": "hw",
  }
])



//分页条数据模型
const pageNum = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(15)//每页条数

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
    pageSize.value = size
     historyDataList()
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
    pageNum.value = num
    historyDataList()
}


import {orderExportService, orderMemberListService, orderRefundService} from '@/api/orderMember.js'



import { Plus } from '@element-plus/icons-vue'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import {ElMessage, ElMessageBox} from "element-plus";
import {interestPublishInterestPublishService} from "@/api/interestPublishRecordData.js";
import {knowledgeDeleteService} from "@/api/knowledge.js";
import axios from "axios";
import request from "@/utils/request.js";


const orderRefund = (row) => {
  //提示用户  确认框

  ElMessageBox.confirm(
      '你确认要退款吗?',
      '温馨提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        //调用接口
        let params = {
          tradeNo: row.tradeNo
        }
        let result = await orderRefundService(params);
        ElMessage({
          type: 'success',
          message: '退款成功',
        })
        //刷新列表
        historyDataList()
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '用户取消了退款',
        })
      })
}





const historyDataList = async () => {

    let params = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        account:account.value?account.value:null,
        name:name.value?name.value:null,
        timeFrom: queryTime.value ? queryTime.value[0] : null,
        timeEnd: queryTime.value ? queryTime.value[1] : null,
        orderNo:orderNo.value ?orderNo.value:null,
        channel:channel.value ?channel.value:null,
      payState:payState.value ?payState.value:null,
       payType:payType.value!=='' ?payType.value:null,

    }
    let result = await orderMemberListService(params);
    //渲染视图
    total.value = result.data.total;
    historyData.value = result.data.records;


}

const orderExport = async () => {

  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    account:account.value?account.value:null,
    name:name.value?name.value:null,
    timeFrom: queryTime.value  ? queryTime.value[0] : null,
    timeEnd: queryTime.value ? queryTime.value[1] : null,
    orderNo:orderNo.value ?orderNo.value:null,
    channel:channel.value ?channel.value:null,
    payState:payState.value ?payState.value:null,
    payType:payType.value!=='' ?payType.value:null,

  }

  const url = '/api/admin/pay/export';

  console.log(params);
  const searchParams = new URLSearchParams();
  for (let key in params) {
    if (params[key]!== null && params[key] !==undefined ) {
      searchParams.append(key, params[key]);
    }
  }

  const fullUrl = `${url}?${searchParams.toString()}`;
  console.log(fullUrl);
  const request = new XMLHttpRequest();
  request.open('GET', fullUrl, true);
  request.responseType = 'blob';

  request.onload = function () {
    if (request.status === 200) {
      const blob = request.response;
      const link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = '订单导出.xlsx';
      link.click();
      ElMessage({
        type: 'success',
        message: '导出成功',
      });
    } else {
      ElMessage({
        type: 'error',
        message: '导出失败',
      });
    }
  };
  request.send();

}


const orderNo = ref('')

historyDataList();

</script>
<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>会员订单</span>
              <div class="extra">
                <el-button type="primary"  @click="title = '订单导出';orderExport()">订单导出</el-button>
              </div>
            </div>
        </template>
        <!-- 搜索表单 -->
        <el-form inline>
            <el-form-item label="时间">
                <el-date-picker v-model="queryTime"  type="daterange" align="right" unlink-panels range-separator="至"
                    start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD">
                </el-date-picker>
            </el-form-item>
          <el-form-item label="支付状态">
            <el-select placeholder="请选择" v-model="payState">
              <el-option v-for="c in payStates" :key="c.id" :label="c.contentValue" :value="c.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="支付渠道">
            <el-select placeholder="请选择" v-model="payType">
              <el-option v-for="c in payTypes" :key="c.id" :label="c.contentValue" :value="c.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单来源">
            <el-select placeholder="请选择" v-model="channel">
              <el-option v-for="c in channels" :key="c.value" :label="c.name" :value="c.value">
              </el-option>
            </el-select>
          </el-form-item>
            <el-form-item label="订单号">
                <el-input  v-model="orderNo" />
            </el-form-item>
          <el-form-item label="账号">
            <el-input  v-model="account" />
          </el-form-item>
          <el-form-item label="名称">
            <el-input  v-model="name" />
          </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="historyDataList">搜索</el-button>
              <el-button @click="orderNo = ''; account = ''; name = ''; payType = ''; channel = '';queryTime=[]">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 文章列表 -->
        <el-table :data="historyData" border style="width: 100%">
            <el-table-column label="支付时间" width="200" prop="payTime"></el-table-column>
          <el-table-column label="购买账户" prop="account"  width="100"></el-table-column>
          <el-table-column label="支付渠道" width="100px">
            <template v-slot="scope">
              <span v-if="scope.row.payType == 0">微信支付</span>
              <span v-if="scope.row.payType == 1">小寻支付</span>
            </template>
          </el-table-column>
          <el-table-column label="订单来源" width="100px">
            <template v-slot="scope">
              <span v-if="scope.row.channel == 'xm'">小米</span>
              <span v-if="scope.row.channel == 'hw'">华为</span>
              <span v-if="scope.row.channel == 'qh360'">qh360</span>
              <span v-if="scope.row.channel == 'zy'">掌育</span>
              <span v-if="scope.row.channel == 'sjtc'">三基同创</span>
            </template>
          </el-table-column>
          <el-table-column label="用户名称" prop="name"  width="100"></el-table-column>
            <el-table-column label="系统订单号" prop="outTradeNo" width="300"></el-table-column>
            <el-table-column label="支付订单号" prop="tradeNo" width="300"> </el-table-column>
            <el-table-column label="app名称" prop="appName" width="150"></el-table-column>
            <el-table-column label="商品名称" prop="goodName" width="100"></el-table-column>
            <el-table-column label="订单状态" width="100px">
                <template v-slot="scope">
                    <span v-if="scope.row.payState == 1">已支付</span>
                    <span v-if="scope.row.payState == 3">已退款</span>
                </template>
            </el-table-column>

          <el-table-column label="版本信息" width="100px">
            <template v-slot="scope">
              <span v-if="scope.row.version == 1">版本一</span>
              <span v-if="scope.row.version == 2">版本二</span>
            </template>
          </el-table-column>
            <el-table-column label="订单金额（元）" prop="amount" width="150px"></el-table-column>
            <el-table-column label="关联账户" prop="imei"  width="200"></el-table-column>
          <el-table-column label="退款时间" prop="refundTime" width="200"></el-table-column>

          <el-table-column label="操作"  width="100">
            <template #default="{ row }">
              <el-button  v-if="row.payState ==1 && row.payType == 0"   type="danger" @click="orderRefund(row)">退款</el-button>
            </template>
          </el-table-column>

            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>
        <!-- 分页条 -->
        <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 15]"
            layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
            @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />




    </el-card>
</template>
<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}


/* 抽屉样式 */
.avatar-uploader {
    :deep() {
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }

        .el-upload {
            border: 1px dashed var(--el-border-color);
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: var(--el-transition-duration-fast);
        }

        .el-upload:hover {
            border-color: var(--el-color-primary);
        }

        .el-icon.avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            text-align: center;
        }
    }
}

.editor {
    width: 100%;

    :deep(.ql-editor) {
        min-height: 200px;
    }
}
</style>